<!-- Full Width Column -->
<div class="content-wrapper" style="overflow:hidden;height:100%">
  <div class="container">
    <!-- Main content -->
    <section class="content">
          <div class="row">
            <div class="col-sm-9">
              <div class="box box-warning direct-chat direct-chat-warning">
              <div class="box-header with-border">
                <h3 class="box-title">Chat Room</h3>
                <div class="box-tools pull-right">
                  <!-- onlime member list mobile -->
                  <button class="btn btn-box-tool mobile toggle-contact-icon" data-toggle="tooltip" data-widget="chat-pane-toggle" title="Contacts" ng-click="toggleCustom()"><i class="fa fa-comments"></i></button>
                </div>
              </div><!-- /.box-header -->
              <div class="box-body">
                <!-- Conversations are loaded here -->
                <div class="direct-chat-messages" schroll-bottom="messeges">
                  <!-- Message. Default to the left -->
                  <div ng-repeat="messege in messeges" ng-class="{'direct-chat-msg' : true, 'right' : messege.ownMsg, 'wordwrap' : true}" >
                    <div class='direct-chat-info clearfix'>
                      <span class='direct-chat-name pull-left'>{{ messege.username }}</span>
                      <span class='direct-chat-timestamp pull-right'>{{ messege.msgTime }}</span>
                    </div><!-- /.direct-chat-info -->
                    <img class="direct-chat-img" ng-src="app/css/dist/img/{{messege.userAvatar}}" alt="message user image" /><!-- /.direct-chat-img -->
                    <div ng-class="{'direct-chat-text' : true, 'text-right' : messege.ownMsg}">
                      <div>{{ messege.msg }}</div>
                    </div><!-- /.direct-chat-text -->
                  </div><!-- /.direct-chat-msg -->
                </div><!--/.direct-chat-messages-->
                <div class="chat-box"></div>
              </div><!-- /.box-body -->
              <div class="box-footer">
                <!-- Text message  -->
                <form action="" method="post">
                  <div class="input-group">
                    <input type="text" name="message" placeholder="Type Message ..." ng-class="{'form-control': true, 'has-error':isMsgBoxEmpty}" ng-model="chatMsg" ng-change="isMsgBoxEmpty=false" ng-enter="sendMsg()" ng-focus="setFocus" focus-me="setFocus"/>
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-warning btn-flat" ng-click="sendMsg()">Send</button>
                    </span>
                  </div>
                </form>
              </div><!-- /.box-footer-->
              </div><!-- /.box -->
            </div>
            
            <div class="col-sm-3 toggle-contact-list">
              <div class="box box-warning direct-chat direct-chat-warning">  
                <div class="box-header with-border">
                  <h3 class="box-title">Online Members</h3>
                </div><!-- /.box-header -->
                <div class="box-body">
                  <!-- Contacts are loaded here -->
                  <div class="direct-chat-messages ol-members">
                    <ul class='contacts-list'>
                      <li ng-repeat="user in users">
                        <a href>
                          <img class='contacts-list-img' ng-src='app/css/dist/img/{{user.userAvatar}}'/>
                          <div class='contacts-list-info'>
                              <span class="ol-memeber-name" style="line-height:2.6; padding:5px; font-weight : 600; color : #333;">{{ user.username }}</span>
                          </div><!-- /.contacts-list-info -->
                        </a>
                      </li><!-- End Contact Item -->
                    </ul><!-- /.contatcts-list -->
                  </div><!--/.direct-chat-messages-->
                </div><!-- /.box-body -->
              </div><!-- /.box -->
            </div>
          </div>
    </section><!-- /.content -->
  </div><!-- /.container -->
</div><!-- /.content-wrapper -->


